<template>
  <el-dialog :visible.sync="dialog" :title="is_edit ? '编辑': '新增' " append-to-body width="600px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="菜单图标">
        <el-popover
          placement="bottom-start"
          width="460"
          trigger="click"
          @show="$refs['iconSelect'].reset()"
        >
          <IconSelect ref="iconSelect" @selected="selected" />
          <el-input
            slot="reference"
            v-model="form.icon"
            style="width: 460px;"
            placeholder="点击选择图标"
            readonly
          >
            <svg-icon
              v-if="form.icon"
              slot="prefix"
              :icon-class="form.icon"
              class="el-input__icon"
              style="height: 32px;width: 16px;"
            />
            <i v-else slot="prefix" class="el-icon-search el-input__icon" />
          </el-input>
        </el-popover>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="form.name" placeholder="名称" style="width: 460px;" />
      </el-form-item>
      <el-form-item label="菜单排序" prop="sort">
        <el-input-number
          v-model.number="form.sort"
          :min="0"
          :max="999"
          controls-position="right"
          style="width: 460px;"
        />
      </el-form-item>
      <el-form-item label="内部菜单" prop="iframe">
        <el-radio v-model="form.iframe" label="false">是</el-radio>
        <!-- <el-radio v-model="form.iframe" label="true">否</el-radio> -->
      </el-form-item>
      <el-form-item label="链接地址">
        <el-input v-model="form.path" placeholder="菜单路径" style="width: 460px;" />
      </el-form-item>
      <el-form-item v-if="form.iframe === 'false'" label="组件路径">
        <el-input v-model="form.component" placeholder="菜单路径" style="width: 460px;" />
      </el-form-item>
      <el-form-item label="上级类目">
        <treeselect v-model="form.pid" :options="menus" style="width: 460px;" placeholder="选择上级类目" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="text" @click="cancel">取消</el-button> -->
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _menusAll, _menusUpdate, _menusCreate } from "@/http/ajax";
import Treeselect from "@riophae/vue-treeselect";
import IconSelect from "@/components/IconSelect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect, IconSelect },
  name: "edit",
  props: {
    is_edit: {
      type: Boolean,
      required: true
    },
    cur_this: {
      type: Object,
      required: null
    }
  },
  data() {
    return {
      menus: [],
      depts: [],
      statusModul: [
        { id: 1, label: "启用", value: true },
        { id: 2, label: "禁用", value: false }
      ],
      dialog: false,
      loading: false,
      form: {
        icon: "",
        name: "",
        sort: 999,
        iframe: "false",
        path: "",
        component: "",
        pid: 0
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        pid: [{ required: true, message: "请选择所属行业", trigger: "blur" }]
      }
    };
  },
  created() {},
  methods: {
    doSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.dialog = true;
          if (this.is_edit) {
            _menusUpdate(
              this.form,
              res => {
                this.dialog = false;
                this.cur_this.getList();
                this.dataInit();
              },
              err => {}
            );
          } else {
            _menusCreate(
              this.form,
              res => {
                this.dialog = false;
                this.cur_this.getList();
                this.dataInit();
              },
              err => {}
            );
          }
        }
      });
    },
    selected(name) {
      this.form.icon = name;
    },
    domInit() {
      _menusAll(
        res => {
          this.menus = [];
          const menu = { id: 0, label: "顶级类目", children: [] };
          menu.children = res;
          this.menus.push(menu);
        },
        err => {}
      );
    },
    dataInit() {
      this.form = {
        icon: "",
        name: "",
        sort: 999,
        iframe: "false",
        path: "",
        component: "",
        pid: 0
      };
    },
    closeDialog() {}
  }
};
</script>

<style lang="scss">
.el-input-number .el-input__inner {
    text-align: left;
}
</style>
